<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .back-to-top {

            position: fixed;
            bottom: 50px;
            right: 50px;


            padding: 10px 20px;
            background-color: blue;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;


            display: none;
            opacity: 0;


        }

        .sk {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 500px;
        }

        .content {
            width: 1000px;
            height: 4000px;
            background-color: #ff6700;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="header">
        <nav class="tab-nav">
            <ul>
                <li class="tab-item"><a href=" " class="active">百货</a></li>
                <li class="tab-item"><a href="#">亏贼bro</a></li>
                <li class="tab-item"><a href="#">伤心光棍</a></li>
                <li class="tab-item"> <a href="#">没有蛀牙</a></li>
                <li class="tab-item"><a href="#">纯纯神人</a></li>
            </ul>
        </nav>
    </div>
    <div class="content">父级元素
        <div class="sk">秒杀模块</div>
    </div>
    <button class="back-to-top">返回顶部</button>
    <script>
        let lis = document.querySelectorAll('.header.tab-item')
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                console.log(11)
            })
        }

        const sk = document.querySelector('.sk');
        const header = document.querySelector('.header');
        const backToTopBtn = document.querySelector('.back-to-top');


        window.addEventListener('scroll', function () {
            const n = document.documentElement.scrollTop;


            if (n >= sk.offsetTop) {
                header.style.top = '0';
            } else {
                header.style.top = '-80px';
            }


            if (n > 300) {
                backToTopBtn.style.display = 'block';
                setTimeout(() => {
                    backToTopBtn.style.opacity = '1';
                }, 10);
            } else {
                backToTopBtn.style.opacity = '0';
                setTimeout(() => {
                    backToTopBtn.style.display = 'none';
                }, 300);
            }
        });

        backToTopBtn.addEventListener('click', function () {

            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>

</html>